import React, { useState } from "react";
import { Layout, Menu, MenuProps } from "antd";
import Header from "@/components/Header";
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import Home from "@/pages/Home.tsx";
import AdminList from "@/pages/admin/AdminList.tsx";
import EnterpriseList from "@/pages/enterprise/EnterpriseList.tsx";
import DepartmentList from "@/pages/department/DepartmentList.tsx";
import RecruiterList from "@/pages/recruiter/RecruiterList.tsx";
import RecruiterAddOfHr from "@/pages/recruiter/RecruiterAddOfHr.tsx";
import JobDescriptionList from "@/pages/jobDescription/JobDescriptionList.tsx";
import CandidateList from "@/pages/candidate/CandidateList.tsx";
import CandidateAddOfJobSeeker from "@/pages/candidate/CandidateAddOfJobSeeker.tsx";
import EducationList from "@/pages/education/EducationList.tsx";
import WorkExperienceList from "@/pages/workExperience/WorkExperienceList.tsx";
import SkillCertificateList from "@/pages/skillCertificate/SkillCertificateList.tsx";
import TrainingRecordList from "@/pages/trainingRecord/TrainingRecordList.tsx";
import ApplicationRecordList from "@/pages/applicationRecord/ApplicationRecordList.tsx";
import ContractList from "@/pages/contract/ContractList.tsx";
import ChartList from "@/pages/chart/ChartList.tsx";
import {
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined, UserOutlined,
  BankOutlined, ApartmentOutlined, TeamOutlined, TableOutlined, SolutionOutlined, BookOutlined, ContainerOutlined, FileTextOutlined, FileSyncOutlined, EditOutlined, FormOutlined
} from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import { getTypeAsNumber } from "@/utils/getTypeAsNumberFromSessionStorage.ts"

const MainLayout: React.FC = () => {

  const { Sider, Content } = Layout;
  const { t } = useTranslation();

  const contentStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    padding: '10px 10px',
    overflowY: 'auto'
  };

  const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px'
  };

  const layoutStyle = {
    overflow: 'hidden',
    height: '100vh',
    width: '100vw',
  };

  const [collapsed, setCollapsed] = useState(false);

  let menuItems = [
    { key: 'collapse', label: '收起', icon: collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined) },
    { key: '/Home', label: '主页', path: '/Home', icon: React.createElement(HomeOutlined) },
    { key: '/AdminList', label: '管理员', path: '/AdminList', icon: React.createElement(UserOutlined) },
    { key: '/EnterpriseList', label: '企业信息', path: '/EnterpriseList', icon: React.createElement(BankOutlined) },
    { key: '/DepartmentList', label: '部门信息', path: '/DepartmentList', icon: React.createElement(ApartmentOutlined) },
    { key: '/RecruiterList', label: '招聘专员信息', path: '/RecruiterList', icon: React.createElement(TeamOutlined) },
    { key: '/JobDescriptionList', label: '招聘岗位', path: '/JobDescriptionList', icon: React.createElement(TableOutlined) },
    { key: '/CandidateList', label: '应聘者基本信息', path: '/CandidateList', icon: React.createElement(SolutionOutlined) },
    { key: '/EducationList', label: '教育经历', path: '/EducationList', icon: React.createElement(BookOutlined) },
    { key: '/WorkExperienceList', label: '工作经历', path: '/WorkExperienceList', icon: React.createElement(ContainerOutlined) },
    { key: '/SkillCertificateList', label: '技能证书', path: '/SkillCertificateList', icon: React.createElement(FileTextOutlined) },
    { key: '/TrainingRecordList', label: '培训记录', path: '/TrainingRecordList', icon: React.createElement(FileSyncOutlined) },
    { key: '/ApplicationRecordList', label: '应聘申请', path: '/ApplicationRecordList', icon: React.createElement(FormOutlined) },
    { key: '/ContractList', label: '劳动合同信息', path: '/ContractList', icon: React.createElement(EditOutlined) },
    { key: '/ChartList', label: '数据统计', path: '/ChartList', icon: React.createElement(PieChartOutlined) }
  ];
  const type = getTypeAsNumber()
  if (type === 2) {
    menuItems = [
      { key: 'collapse', label: '收起', icon: collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined) },
      { key: '/Home', label: '主页', path: '/Home', icon: React.createElement(HomeOutlined) },
      { key: '/RecruiterAddOfHr', label: '我的信息', path: '/RecruiterAddOfHr', icon: React.createElement(TeamOutlined) },
      { key: '/JobDescriptionListOfHr', label: '招聘岗位', path: '/JobDescriptionList', icon: React.createElement(TableOutlined) },
      { key: '/ApplicationRecordListOfHr', label: '应聘申请', path: '/ApplicationRecordList', icon: React.createElement(FormOutlined) },
      { key: '/ContractList', label: '劳动合同信息', path: '/ContractList', icon: React.createElement(EditOutlined) },
      { key: '/ChartList', label: '数据统计', path: '/ChartList', icon: React.createElement(PieChartOutlined) }
    ]
  }
  if (type === 3) {
    menuItems = [
      { key: 'collapse', label: '收起', icon: collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined) },
      { key: '/Home', label: '主页', path: '/Home', icon: React.createElement(HomeOutlined) },
      { key: '/CandidateAddOfJobSeeker', label: '应聘者基本信息', path: '/CandidateListOfJobSeeker', icon: React.createElement(SolutionOutlined) },
      { key: '/EducationListOfJobSeeker', label: '教育经历', path: '/EducationListOfJobSeeker', icon: React.createElement(BookOutlined) },
      { key: '/WorkExperienceListOfJobSeeker', label: '工作经历', path: '/WorkExperienceListOfJobSeeker', icon: React.createElement(ContainerOutlined) },
      { key: '/SkillCertificateListOfJobSeeker', label: '技能证书', path: '/SkillCertificateListOfJobSeeker', icon: React.createElement(FileTextOutlined) },
      { key: '/TrainingRecordListOfJobSeeker', label: '培训记录', path: '/TrainingRecordListOfJobSeeker', icon: React.createElement(FileSyncOutlined) },
      { key: '/ApplicationRecordListOfJobSeeker', label: '应聘申请', path: '/ApplicationRecordListOfJobSeeker', icon: React.createElement(FormOutlined) },
      { key: '/ContractList', label: '劳动合同信息', path: '/ContractList', icon: React.createElement(EditOutlined) },
    ]
  }

  const navigate = useNavigate();

  const location = useLocation();
  const defaultLocation = location.pathname === '/' ? '/Home' : location.pathname;

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === 'collapse') {
      setCollapsed(!collapsed)
      return
    }
    navigate(e.key);
  };

  return (
    <Layout style={layoutStyle}>
      <Header title={t('title')} />
      <Layout>
        <Sider collapsible collapsed={collapsed} style={siderStyle} theme={"light"} trigger={null}>
          <Menu
            onClick={handleMenuClick}
            defaultSelectedKeys={[defaultLocation]}
            defaultOpenKeys={[defaultLocation]}
            mode="inline"
            items={menuItems}
          />
        </Sider>
        <Content style={contentStyle}>
          <Routes>
            <Route path="/Home" element={<Home />} />
            <Route path="/AdminList" element={<AdminList />} />
            <Route path="/EnterpriseList" element={<EnterpriseList />} />
            <Route path="/DepartmentList" element={<DepartmentList />} />
            <Route path="/RecruiterList" element={<RecruiterList />} />
            <Route path="/JobDescriptionList" element={<JobDescriptionList />} />
            <Route path="/CandidateList" element={<CandidateList />} />
            <Route path="/EducationList" element={<EducationList />} />
            <Route path="/WorkExperienceList" element={<WorkExperienceList />} />
            <Route path="/SkillCertificateList" element={<SkillCertificateList />} />
            <Route path="/TrainingRecordList" element={<TrainingRecordList />} />
            <Route path="/ApplicationRecordList" element={<ApplicationRecordList />} />
            <Route path="/ContractList" element={<ContractList />} />
            <Route path="/ChartList" element={<ChartList />} />
            <Route path="/JobDescriptionListOfHr" element={<JobDescriptionList />} />
            <Route path="/ApplicationRecordListOfHr" element={<ApplicationRecordList />} />
            <Route path="/RecruiterAddOfHr" element={<RecruiterAddOfHr />} />
            <Route path="/CandidateAddOfJobSeeker" element={<CandidateAddOfJobSeeker />} />
            <Route path="/EducationListOfJobSeeker" element={<EducationList />} />
            <Route path="/WorkExperienceListOfJobSeeker" element={<WorkExperienceList />} />
            <Route path="/SkillCertificateListOfJobSeeker" element={<SkillCertificateList />} />
            <Route path="/TrainingRecordListOfJobSeeker" element={<TrainingRecordList />} />
            <Route path="/ApplicationRecordListOfJobSeeker" element={<ApplicationRecordList />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default MainLayout;